<template>
    <div class="user">
        <div class="header">
            <div class="content app-right-icon-my">
                <div class="left"><img src="../../assets/headimg_1.jpg"/></div>
                <div class="right" @click="onClick">
                    <span>乐不可之</span>
                    <span>大智若愚，成就你我</span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="row" v-for="(item, key) in data" :key="key">
                <new-cell-group :list="item" />
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>

    @import '../../style/variable';

    .user{
        background-color: #F8F8F8;
        .header {
            background-color: #CE9940;
            .content {
                display: flex;
                padding: 0.9rem 1.5rem 2rem 1.5rem;
                .left {
                    width: 6.4rem;
                    height: 6.4rem;
                    img {
                        display: block;
                        border-radius: 50%;
                        height: 100%;
                    }
                }
                .right {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin-left: 1.3rem;
                    font-size: 1.3rem;
                    color: @color-white;
                    span:nth-of-type(1) {
                        margin-bottom: 0.6rem;
                        font-size: 1.6rem;
                    }
                }
            }
        }
        .content {
            .row:nth-of-type(2), .row:nth-of-type(5), .row:nth-of-type(6) {
                margin-bottom: 0.8rem;
            }
        }
    }
</style>
<script>
    import { Cell, CellGroup } from 'vant';
    import img1 from '../../assets/1-user-fb.svg';
    import img2 from '../../assets/2-user-sc.svg';
    import img3 from '../../assets/3-user-yy.svg';
    import img4 from '../../assets/4-user-bm.svg';
    import img5 from '../../assets/5-user-zc.svg';
    import img6 from '../../assets/6-user-xx.svg';
    import img7 from '../../assets/7-user-zl.svg';
    import img8 from '../../assets/8-user-sz.svg';
    import img9 from '../../assets/9-user-djs.svg';
    export default {
        components: {
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
        },
        data(){
            return {
                data: [
                    {
                        title: '我的发布',
                        value: "资产 | 报价 | 八卦 | 职位 | 简历",
                        icon: img1,
                        to: '/user/myRelease'
                    },{
                        title: '我的收藏',
                        value: "报价 | 资讯 | 金融圈",
                        icon: img2,
                        to: '/user/myCollection'
                    },{
                        title: '我的预约',
                        icon: img3,
                        to: '/user/myReservation'
                    },{
                        title: '我的报名',
                        icon: img4,
                        to: '/user/myRegistration'
                    },{
                        title: '我的职场',
                        icon: img5,
                        to: '/user/myWorkplace'
                    },{
                        title: '消息/留言',
                        icon: img6,
                        to: '/user/message'
                    },{
                        title: '个人资料',
                        icon: img7,
                        to: '/user/personalData'
                    },{
                        title: '设置',
                        icon: img8,
                        to: '/user/setting'
                    },{
                        title: '关于',
                        icon: img9,
                        to: '/user/about'
                    }
                ]
            }
        },
        methods: {
            onClick() {
                this.$router.push('/user/login');
            }
        }
    }
</script>
